<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            border: 0;
        }

        ul li {
            list-style-type: none;
        }

        main {
            width: 90%;
            height: 800px;
            border: 2px solid black;
            margin: 0 auto;

            background: #f6f1f1;
            /*align-content: center;*/
            /*justify-content: center;*/

            display: grid;

            /*主轴居中*/
            justify-items: center;
            /*交叉轴居中*/
            align-items: center;
        }

        .container {
            width: 600px;
            background: white;
            border: 2px solid black;
            box-shadow: 5px 5px 2px black;
            text-align: center;
        }

        .search-box {
            display: inline-block;
            margin: 20px auto;
            /*border: 1px solid black;*/

        }


        input[name="search-input"] {
            font-weight: bold;
            font-size: 18px;
            border: 2px solid black;
            border-radius: 10px;
            width: 300px;
            height: 40px;

            outline: none;
        }


        button { /* 按钮美化 */
            width: 60px; /* 宽度 */
            height: 50px; /* 高度 */
            border-width: 0; /* 边框宽度 */
            border-radius: 3px; /* 边框半径 */
            background: #1E90FF; /* 背景颜色 */
            cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
            outline: none; /* 不显示轮廓线 */

            color: white; /* 字体颜色 */
            font-size: 17px; /* 字体大小 */
        }

        button:hover { /* 鼠标移入按钮范围时改变颜色 */
            background: #5599FF;
        }


        ul li {
            text-align: left;
            font-weight: bold;
            font-size: 16px;
            padding: 10px;

            border-top: 1px solid #666;
        }

        li .del {
            float: right;
        }
    </style>
</head>
<body>
<main>
    <div class="container">

        <div class="search-box">
            <label>
                <input id="id-input" name="search-input" type="text"/>
                <button id="id-commit">提交</button>
            </label>
        </div>
        <div class="suggest-box">
            <ul>
                <li><span>test1</span>
                    <span class="del">
                        <a href="#">删除</a>
                    </span>
                </li>

                <li><span>test1</span>
                    <span class="del">
                        <a href="#">删除</a>
                    </span>
                </li>
                <li><span>test1</span>
                    <span class="del">
                        <a href="#">删除</a>
                    </span>
                </li>
                <li><span>test1</span>
                    <span class="del">
                        <a href="#">删除</a>
                    </span>
                </li>
                <li><span>test1</span>
                    <span class="del">
                        <a href="#">删除</a>
                    </span>
                </li>
                <li><span>test1</span>
                    <span class="del">
                        <a href="#">删除</a>
                    </span>
                </li>
                <li><span>test1</span>
                    <span class="del">
                        <a href="#">删除</a>
                    </span>
                </li>
                <li><span>test1</span>
                    <span class="del">
                        <a href="#">删除</a>
                    </span>
                </li>
                <li><span>test1</span>
                    <span class="del">
                        <a href="#">删除</a>
                    </span>
                </li>
                <li><span>test1</span>
                    <span class="del">
                        <a href="#">删除</a>
                    </span>
                </li>
                <li><span>test1</span>
                    <span class="del">
                        <a href="#">删除</a>
                    </span>
                </li>
                <li><span>test1</span>
                    <span class="del">
                        <a href="#">删除</a>
                    </span>
                </li>
                <li><span>test1</span>
                    <span class="del">
                        <a href="#">删除</a>
                    </span>
                </li>
                <li><span>test1</span>
                    <span class="del">
                        <a href="#">删除</a>
                    </span>
                </li>
                <li><span>test1</span>
                    <span class="del">
                        <a href="#">删除</a>
                    </span>
                </li>
                <li><span>test1</span>
                    <span class="del">
                        <a href="#">删除</a>
                    </span>
                </li>

            </ul>
        </div>
    </div>
</main>

<script>
    let eInput = document.getElementById("id-input");


    function debounce(func, delay = 1000, rightNow = false) {
        let timer = null;
        return function () {
            let context = this;
            let args = arguments;

            if (rightNow === false) {
                // 每次这个返回的函数被调用，就清除定时器，以保证不执行 fn
                if(timer !== null){
                    clearTimeout(timer);
                }


                // 当返回的函数被最后一次调用后（也就是用户停止了某个连续的操作），
                // 再过 delay 毫秒就执行 fn
                timer = setTimeout(function () {
                    func.apply(context, args)
                }, delay)
            }

        }
    }


    eInput.onkeyup = function () {

    }
</script>
</body>
</html>